<template>
    <div>
        <a-row>
            <a-col span="11" align="center" justify="space-around">
            <a-row type="flex">
                <a-button type="primary" @click="goAdd">添加</a-button>
            </a-row>
            </a-col>
            <a-col span="7" offset="6">
            <a-row type="flex">
                <a-col span="24">
                <a-input-search @search="getList"></a-input-search>
                </a-col>
            </a-row>
            </a-col>
        </a-row>
        <br />
        <a-row>
            <a-table
            :columns="columns"
            :dataSource="data"
            >
            <a slot="action" slot-scope="text, record" href="javascript:;">
                <a-dropdown :trigger="['click']">
                <a class="ant-dropdown-link" href="#">
                    操作
                    <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                    <a-menu-item key="0">
                        <a href="javascript: void(0)" @click="editIt(record.id)">编辑</a>
                    </a-menu-item>
                    <a-menu-item key="1">
                        <a href="javascript: void(0)" @click="showModal">删除</a>
                    </a-menu-item>
                    <a-modal
                        :visible="visible"
                        @ok="del(record.id)"
                        @cancel="handleCancel"
                    >
                        <p>是否要删除此项目</p>
                    </a-modal>
                </a-menu>
                </a-dropdown>
            </a>
            </a-table>
        </a-row>
    </div>
</template>
<script>
import { getTollFormula, delFormula } from '@/api/cashier'
import { mapGetters } from 'vuex'
export default {
    name: 'charge_toll_tollFormula',
    data() {
        return {
            columns: [
                {title: '公式名称', dataIndex: 'name'},
                {title: '备注', dataIndex: 'remarks'},
                {
                  title: '操作',
                  key: 'operation',
                //   fixed: 'right',
                  scopedSlots: { customRender: 'action' }
                }
            ],
            data: [],
            visible: false
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        goAdd() {
            this.$router.push({ name: 'charge_toll_add_formula' ,params: { id:'add' }})
        },
        // 获取列表数据
        getList(value) {
            getTollFormula({name: value,token:this.token()}).then(res => {
                this.data = res.data
            }).catch(err => {
                console.log(err)
            })
        },
        editIt(id){
            this.$router.push({ name: 'charge_toll_add_formula', params: { id } })
        },
        del(id) {
            delFormula({id,token:this.token()}).then(res => {
                this.$notification.success({
                    message: '成功',
                    description: res.msg
                })
                this.getList()
            }).catch(err => {
                this.$notification['error']({
                    message: '错误',
                    description: res.msg,
                    duration: 4
                })
            })
        },
        showModal() {
            this.visible = true
        },
        handleCancel() {
            this.visible = false
        }
    }
}
</script>
<style scoped>
</style>